<template>
  <div class="news-container">
    <el-col :span="24">
      <div>
        <el-tabs v-model="paneName" type="border-card" stretch @tab-click="switchPane">
          <!--我的待办home-->
          <el-tab-pane stripe="true" title="我的待办" name="upcoming">
            <span slot="label">
              <i class="el-icon-s-comment" /> 我的待办
            </span>
            <el-table :data="upcomingList">
              <el-table-column prop="nodeTitle" label="任务节点">
                <template scope="scope">
                  <el-link type="primary" @click="getComplete(scope.row)">{{ scope.row.nodeTitle }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="nodeTitle" label="任务名称">
                <template scope="scope">
                  <el-link type="primary" @click="getProcessImg(scope.row)">【{{scope.row.objName}}】- {{ scope.row.processKey }} - {{scope.row.proId }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="userId" label="处理人" />
              <el-table-column prop="proCreateUserId" label="发起人" />
            </el-table>
          </el-tab-pane>
          <!--我的待办end-->
          <el-tab-pane stripe="true" title="我的已办" name="upDown">
            <span slot="label">
              <i class="el-icon-s-claim" /> 我的已办
            </span>
            <el-table :data="upDownList">
              <el-table-column prop="nodeTitle" label="任务节点">
                <template scope="scope">
                  <el-link type="primary" @click="getComplete(scope.row)">{{ scope.row.nodeTitle }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="nodeTitle" label="任务名称">
                <template scope="scope">
                  <el-link type="primary" @click="getProcessImg(scope.row)">【{{scope.row.objName}}】- {{ scope.row.processKey }} - {{scope.row.proId }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="processKey" label="流程名称">
                <template scope="scope">
                  <el-link type="primary" @click="getProcessImg(scope.row)">{{ scope.row.processKey }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="userId" label="处理人" />
              <el-table-column prop="proCreateUserId" label="发起人" />
            </el-table>
          </el-tab-pane>
          <el-tab-pane stripe="true" title="我的流程" name="launch">
            <span slot="label">
              <i class="el-icon-s-order" /> 我的流程
            </span>
            <el-table :data="launchList">
              <el-table-column prop="nodeTitle" label="任务名称">
                <template scope="scope">
                  <el-link type="primary" @click="getProcessImg(scope.row)">【{{scope.row.objName}}】- {{ scope.row.processKey }} - {{scope.row.proId }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="processKey" label="流程key">
                <template scope="scope">
                  <el-link type="primary" @click="getProcessImg(scope.row)">{{ scope.row.processKey }}</el-link>
                </template>
              </el-table-column>
              <el-table-column prop="proId" label="当前节点" />
              <el-table-column prop="proId" label="当前处理人" />
              <el-table-column prop="nodeStatus" label="流程状态" />
              <el-table-column prop="proCreateUserId" label="发起人" />
            </el-table>

          </el-tab-pane>
        </el-tabs>
        <div class="block">
          <el-pagination
            background
            :current-page="pageNum"
            :page-sizes="[7, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalElements"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>
    </el-col>
    <!--提交弹出框home-->
    <el-dialog
      title="提交任务"
      :visible.sync="complete"
      width="50%"
    >
      <div>
        <el-select v-model="optionValue" size="mini" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <div style="margin: 50px 0;" />
        <el-input
          v-model="desc"
          type="textarea"
          :rows="5"
          placeholder="备注"
          clearable
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="complete = false">取 消</el-button>
        <el-button type="primary" @click="submitComplete(myTask)">确 定</el-button>
      </span>
    </el-dialog>
    <!--提交弹出框end-->
    <!--流程状态图home-->
    <div class="processStatus">
      <el-dialog :visible.sync="processStatus" width="70%" :show-close="false">
        <el-tabs v-model="dialogStatus">
          <el-tab-pane label="流程状态" name="processImg">
            <div class="block">
              <el-image :src="processImgUrl" />
            </div>
          </el-tab-pane>
          <el-tab-pane label="审批意见" name="processComments">
            <el-table :data="processCommentsList">
              <el-table-column prop="name" label="节点名称" />
              <el-table-column prop="assignee" label="处里人" />
              <el-table-column prop="startTime" label="开始时间" />
              <el-table-column prop="endTime" label="结束时间" />
              <el-table-column prop="message" label="审批意见" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      <!--<span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="processStatus = false">确 定</el-button>
      </span>-->
      </el-dialog></div>
    <!--流程状态图end-->
  </div>
</template>

<script>
import { getupcoming, getDone, getLaunch, complete, getComments } from '@/api/myTask'
import { Message } from 'element-ui'
export default {
  name: 'Dashboard',
  data() {
    return {
      upcomingList: null,
      upDownList: null,
      launchList: null,
      processCommentsList: null,
      userId: undefined,
      complete: false,
      processStatus: false,
      processImgUrl: '',
      myTask: '',
      options: [
        { value: 'true', label: '同意' },
        { value: 'false', label: '驳回' }
      ],
      optionValue: 'true',
      desc: '',
      myTaskPage: '',
      pageSize: 7,
      totalElements: 0,
      pageNum: 1,
      paneName: 'upcoming',
      dialogStatus: 'processImg'
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      // this.userId = getToken()
      this.getupcoming()
      // this.getDone()
      // this.getLaunch()
    },
    getupcoming() {
      console.log('查询待办')
      getupcoming({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        sort: 'DESC',
        sortField: 'id'
      }).then((res) => {
        if (res.success) {
          this.upcomingList = res.result.content
          // this.myTaskPage = res.result.content
          this.totalElements = res.result.totalElements
          this.pageSize = res.result.pageSize
          this.pageNum = res.result.pageNum
        } else {
          Message.success('系统异常')
        }
      })
    },
    getDone() {
      console.log('查询已办')
      getDone({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        sort: 'DESC',
        sortField: 'id'
      }).then((res) => {
        if (res.success) {
          this.upDownList = res.result.content
          // this.myTaskPage = res.result.content
          this.totalElements = res.result.totalElements
          this.pageSize = res.result.pageSize
          this.pageNum = res.result.pageNum
        } else {
          Message.success('系统异常')
        }
      })
    },
    getLaunch() {
      console.log('我的流程')
      getLaunch({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        sort: 'DESC',
        sortField: 'id'
      }).then((res) => {
        if (res.success) {
          this.launchList = res.result.content
          // this.myTaskPage = res.result.content
          this.totalElements = res.result.totalElements
          this.pageSize = res.result.pageSize
          this.pageNum = res.result.pageNum
        } else {
          Message.success('系统异常')
        }
      })
    },
    submitTask(row, column, event, cell) {
      if (column.label == '任务节点') {
        this.complete = true
      }
    },
    getProcessImg(row) {
      this.processImgUrl = 'http://dev.zglong.cn:9000/act-zglong/proManagement/processImage/' + row.proId
      this.processStatus = true
      getComments(row.proId).then(r => {
        if (r.success) {
          this.processCommentsList = r.result
        } else {
          Message.error('系统异常')
        }
      })
    },
    getComplete(row) {
      this.complete = true
      this.myTask = row
    },
    submitComplete(row) {
      const params = new URLSearchParams()
      params.append('myTaskId', row.id)
      params.append('varValue', this.optionValue)
      params.append('desc', this.desc)
      params.append('taskId', row.task)
      complete(params).then(res => {
        if (res.success) {
          this.getupcoming()
          Message.success('提交成功')
          this.optionValue = ''
          this.desc = ''
        } else {
          Message.error('提交失败')
        }
      })
      this.complete = false
      this.myTask = ''
    },
    handleSizeChange(val) {
      this.pageSize = val
      if (this.paneName == 'upcoming') {
        this.getupcoming()
      } else if (this.paneName == 'upDown') {
        this.getDone()
      } else if (this.paneName == 'launch') {
        this.getLaunch()
      }
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.pageNum = val
      if (this.paneName == 'upcoming') {
        this.getupcoming()
      } else if (this.paneName == 'upDown') {
        this.getDone()
      } else if (this.paneName == 'launch') {
        this.getLaunch()
      }
    },
    switchPane(tab, event) {
      if (tab.name == 'upcoming') {
        this.pageNum = 1
        this.pageSize = 7
        this.totalElements = 0
        this.paneName = 'upcoming'
        this.getupcoming()
      } else if (tab.name == 'upDown') {
        this.pageNum = 1
        this.pageSize = 7
        this.totalElements = 0
        this.paneName = 'upDown'
        this.getDone()
      } else if (tab.name == 'launch') {
        this.pageNum = 1
        this.pageSize = 7
        this.totalElements = 0
        this.paneName = 'launch'
        this.getLaunch()
      }
    }
  }
}
</script>

<style lang="scss">
  .news {
    &-container {
      margin: 20px;
    }

    &-text {
      font-size: 20px;
      line-height: 30px;
    }
  }
  .processStatus .el-dialog__header {
    padding: 0px 0px 0px;
  }
  .processStatus .el-dialog__body {
    padding: 10px 15px;
    color: #606266;
    font-size: 14px;
    word-break: break-all;
  }

</style>
